<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编写表格table标签并设置</title>
    <link rel="stylesheet" href="../static/调试.svg" type="image/x-icon">
    <style>
/*        合并边框*/
        table{
            border-collapse: collapse;
        }
/*        表格标题设置（<caption> 标签中的文字设置）*/
        caption{
            font-size: 30px;
            font-weight: bold;
            color: sandybrown;
        }
/*        表头内容设置（<th>标签内容设置）*/
        th {
            font-size: 20px;
            color: wheat;
            background: lightseagreen;
    }
    </style>
</head>
<body>
<!--编写表格table标签， 要求设置标题、表头、数据（5*5）-->
<table border="1">
<!--    表格标题-->
    <caption>用户信息表</caption>
<!--    表头信息，上下滚动时候，可以固定表头-->
    <thead>
<!--    行标签-->
    <tr>
<!--        表头内容-->
        <th>用户id</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>邮  箱</th>
        <th>地  址</th>
    </tr>
    </thead>
<!--    表格主体-->
    <tbody>
    <tr>
<!--        表格数据-->
        <td>001</td>
        <td>小李</td>
        <td>13012345671</td>
        <td>xiaoli001@163.com</td>
        <td>北京市朝阳区</td>
    </tr>

    <tr>
        <td>002</td>
        <td>小王</td>
        <td>13012345672</td>
        <td>xiaowang002@163.com</td>
        <td>北京市朝阳区</td>
    </tr>

    <tr>
        <td>003</td>
        <td>小赵</td>
        <td>13012345673</td>
        <td>xiaozhao003@163.com</td>
        <td>北京市朝阳区</td>
    </tr>

    <tr>
        <td>004</td>
        <td>小孙</td>
        <td>13012345674</td>
        <td>xiaosun004@163.com</td>
        <td>北京市朝阳区</td>
    </tr>

    <tr>
        <td>005</td>
        <td>小周</td>
        <td>13012345675</td>
        <td>xiaozhou005@163.com</td>
        <td>北京市朝阳区</td>
    </tr>
    </tbody>
</table>
</body>
</html>